<template>
  <canvas ref="canvasRef" class="mouse-trail"></canvas>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const canvasRef = ref(null)
let animationId = null

onMounted(() => {
  const canvas = canvasRef.value
  if (!canvas) return
  
  const ctx = canvas.getContext('2d')
  
  // 设置canvas尺寸
  const resizeCanvas = () => {
    canvas.width = window.innerWidth
    canvas.height = window.innerHeight
  }
  resizeCanvas()
  window.addEventListener('resize', resizeCanvas)
  
  // 轨迹点数组
  const trails = []
  
  class TrailPoint {
    constructor(x, y) {
      this.x = x
      this.y = y
      this.life = 1
      this.size = 15 + Math.random() * 10
      
      // 随机颜色
      const colors = [
        [99, 102, 241],   // 蓝
        [139, 92, 246],   // 紫
        [236, 72, 153],   // 粉
        [0, 243, 255],    // 霓虹蓝
      ]
      this.color = colors[Math.floor(Math.random() * colors.length)]
    }
    
    update() {
      this.life -= 0.02
      this.size *= 0.97
    }
    
    draw(ctx) {
      ctx.save()
      
      // 创建径向渐变
      const gradient = ctx.createRadialGradient(
        this.x, this.y, 0,
        this.x, this.y, this.size
      )
      
      const [r, g, b] = this.color
      gradient.addColorStop(0, `rgba(${r}, ${g}, ${b}, ${this.life * 0.6})`)
      gradient.addColorStop(0.5, `rgba(${r}, ${g}, ${b}, ${this.life * 0.3})`)
      gradient.addColorStop(1, `rgba(${r}, ${g}, ${b}, 0)`)
      
      ctx.fillStyle = gradient
      
      // 发光效果
      ctx.shadowBlur = 20
      ctx.shadowColor = `rgb(${r}, ${g}, ${b})`
      
      ctx.beginPath()
      ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2)
      ctx.fill()
      
      ctx.restore()
    }
  }
  
  // 鼠标移动处理
  let lastX = 0
  let lastY = 0
  
  const handleMouseMove = (e) => {
    const x = e.clientX
    const y = e.clientY
    
    // 计算移动距离
    const dx = x - lastX
    const dy = y - lastY
    const dist = Math.sqrt(dx * dx + dy * dy)
    
    // 如果移动足够快，创建轨迹点
    if (dist > 5) {
      trails.push(new TrailPoint(x, y))
      
      // 限制轨迹点数量
      if (trails.length > 50) {
        trails.shift()
      }
    }
    
    lastX = x
    lastY = y
  }
  
  window.addEventListener('mousemove', handleMouseMove)
  
  // 动画循环
  const animate = () => {
    // 清除画布
    ctx.clearRect(0, 0, canvas.width, canvas.height)
    
    // 更新和绘制轨迹点
    for (let i = trails.length - 1; i >= 0; i--) {
      const trail = trails[i]
      trail.update()
      
      if (trail.life <= 0) {
        trails.splice(i, 1)
      } else {
        trail.draw(ctx)
      }
    }
    
    // 绘制连线
    if (trails.length > 1) {
      ctx.strokeStyle = 'rgba(99, 102, 241, 0.2)'
      ctx.lineWidth = 2
      ctx.lineCap = 'round'
      ctx.lineJoin = 'round'
      
      ctx.beginPath()
      ctx.moveTo(trails[0].x, trails[0].y)
      
      for (let i = 1; i < trails.length; i++) {
        ctx.lineTo(trails[i].x, trails[i].y)
      }
      
      ctx.stroke()
    }
    
    animationId = requestAnimationFrame(animate)
  }
  
  animate()
  
  // 清理
  onUnmounted(() => {
    if (animationId) {
      cancelAnimationFrame(animationId)
    }
    window.removeEventListener('resize', resizeCanvas)
    window.removeEventListener('mousemove', handleMouseMove)
  })
})
</script>

<style scoped>
.mouse-trail {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 99;
  mix-blend-mode: screen;
}
</style>

